<script setup>
import SvgIcon from '@/components/SvgIcon.vue'
import {router} from "@inertiajs/vue3";
import {route} from 'ziggy-js'

defineProps({
    items: {
        type: Array,
        default: () => [],
    },
    active: {
        type: String,
        default: '',
    }
})

const handleClick = (item) => {
    if (item.params) {
        router.visit(route(item.redirect ?? item.name ?? '', item.params))
    } else {
        router.visit(route(item.redirect ?? item.name ?? ''))
    }
}

// 保留两位汉字
const truncateTitle = (title) => {
    if (title.length > 2) {
        return title.slice(0, 2)
    }
    return title
}
</script>
<template>
    <div class="flex-1 flex flex-col items-center justify-between gap-3 z-4">
        <div
            v-for="item in items"
            :key="item.name"
            :class="{ active: active === item.name }"
            class="navbar-item w-[64px] h-[64px] flex items-center justify-center flex-col cursor-pointer text-sm text-white gap-1.5 select-none rounded-md"
            @click="handleClick(item)"
        >
            <svg-icon :name="item.icon" class="text-xl"/>
            <span class="text-sm">{{ truncateTitle(item.title) }}</span>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.navbar-item {
    transition: all 0.3s ease;
    background: hsla(0, 0%, 100%, 0.05); // 默认半透明白色
    color: var(--menu-text-color);

    &:hover {
        border-radius: 8px;
        color: var(--menu-text-color);
        background: var(--menu-active-bg-color);
    }

    &.active {
        border-radius: 8px;
        color: var(--menu-text-color);
        background: var(--menu-active-bg-color);
        transition: all 0.3s ease;
        box-shadow: var(--menu-box-shadow);
    }
}


</style>
